<template>
    <van-tabbar v-model="active" active-color="#353535" inactive-color="#c4c4c4" @change="onChange">
        <van-tabbar-item
            v-for="item,index in tablist"
            :key="index"
            :to="item.to"
            :name="item.name"
            :icon="item.name==active ? item.activeIcon : item.inactiveIcon"
        >{{item.text}}</van-tabbar-item>
    </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
export default {
    components: {
        VanTabbar: Tabbar,
        VanTabbarItem: TabbarItem,
    },

    data() {
        return {
            tablist: [
                {
                    text: "首页",
                    name: "Home",
                    to: "/Home",
                    inactiveIcon: "wap-home-o",
                    activeIcon: "wap-home",
                },
                {
                    text: "点餐",
                    name: "Goods",
                    to: "/Goods",
                    inactiveIcon: "bag-o",
                    activeIcon: "bag",
                },
                {
                    text: "订单",
                    name: "Order",
                    to: "/Order",
                    inactiveIcon: "balance-list-o",
                    activeIcon: "balance-list",
                },
                {
                    text: "我的",
                    name: "Mine",
                    to: "/Mine",
                    inactiveIcon: "friends-o",
                    activeIcon: "friends",
                },
            ],
            active: "Home",
        };
    },
    watch: {
        $route(newval, oldval) {
            this.active = newval.name;
            // localStorage.setItem("tabStatus", this.active);
            sessionStorage.setItem("tabStatus", this.active);
        },
    },
    methods: {
        onChange() {
            // localStorage.setItem("tabStatus", this.active);
            sessionStorage.setItem("tabStatus", this.active);
        },
    },
    created() {
        // const status = localStorage.getItem("tabStatus") || "Home";
        const status = sessionStorage.getItem("tabStatus") || "Home";
        this.active = status;
    },
};
</script>
